<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        body{ margin: 0;}
        
        .page{ display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
        main{ margin: 0 5px; padding-top: 10px; }
        main .banner{ width: 100%; height: 120px; background-color: #f4f4f4; margin-bottom: 15px; border-radius: 5px; }
        
        main .menus{ display: flex; flex-wrap: wrap; }
        main .menus .menu{ width: 20%; margin-bottom: 10px; }
        main .menus .menu::after{ content: ""; display:block; width: 60px;height: 60px; border-radius: 5px;background-color: #f4f4f4; margin: 0 auto; }
        footer{ height: 55px; width: 100%; background-color: #fafafa; position: relative;}
        footer::before{ content: ""; position: absolute; top: 0; left: 0; bottom: auto; right: 0; height: 1px; transform: scaleY(.5); background-color: #eee; }
        footer .menus{ display: flex; justify-content: space-around; height: 100%; align-items: center;}
        footer .menus .menu{ display: flex; width: 20%; flex-direction: column; }
        footer .menus .menu::before{ content: ""; display: block; width: 35px; height: 30px; border-radius: 3px; background-color: #f0f0f0; margin: auto; }
        footer .menus .menu::after{ content: ""; display: block; width: 35px; height: 8px; background-color: #f0f0f0; margin: 5px auto; margin-bottom: 0;}
    </style>
</head>
<body>
    
    <div class="page">
            
            <main>
                <div class="banner"></div>
                <div class="menus">
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                </div>
            </main>
            <footer>
                <div class="menus">
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                    <div class="menu"></div>
                </div>
            </footer>
    </div>
    

</body>
</html>